<script setup>
import { treeselect as menuTreeselect } from '@/api/system/menu'

import { GetMenuPermAPI } from '@/api/system/billconfig'

const props = defineProps({
  // 回显
  modelValue: {
    type: String || Number,
    default: ''
  },
  // 是否禁用
  disabled: {
    type: Boolean,
    default: false
  }
})

const emit = defineEmits(['change'])

// 单据配置数据
const menuOptions = ref([])

const billConfig = ref()
let storageIds = ''
let ids = ''

const selsect = arr => {
  try {
    arr.forEach(item => {
      storageIds += `${item.menuId},`
      if (item.menuId == props.modelValue) {
        ids = storageIds
      } else {
        if (!item?.children && item.menuId != props.modelValue) storageIds = ''

        if (item?.children) selsect(item.children)
      }
    })
  } catch {
  } finally {
  }
  billConfig.value = ids
    .slice(0, ids.length - 1)
    .split(',')
    .map(item => Number(item))
}

// 多选强制单选
const nodeClick = val => {
  // emit('update:modelValue', val[val.length])
  // console.log(val, '单据组件')
  emit('change', val)
}

const getMenuPerm = async () => {
  const res = await GetMenuPermAPI()
  menuOptions.value = res.data
  selsect(menuOptions.value, props.modelValue)
}
getMenuPerm()
</script>

<template>
  <el-cascader
    v-model="billConfig"
    :disabled="props.disabled"
    :show-all-levels="false"
    :options="menuOptions"
    :props="{ label: 'menuName', children: 'children', value: 'menuId' }"
    @change="nodeClick"
  />
</template>
